<template>
  <div class="home">
    <swiper/>
    <div class="section" v-for="(item,index) in staffList" :key="index">
      <div class="section-title">{{ item.name }}</div>
      <content-list :contentList="item.list"></content-list>
    </div>
  </div>
</template>

<script>
import contentList from '../components/ContentList'
import Swiper from '../components/Swiper'
import {getAllStaffList, getHotStaff, getNewStaff} from "../api";

export default {
  name: 'home',
  components: {
    Swiper,
    contentList
  },
  data() {
    return {
      staffList: [
        {name: '最新乐谱', list: []},
        {name: '最热乐谱', list: []},
        {name: '乐谱集', list: []},
      ]
    }
  },
  created() {
    this.getStaff();
    this.getStaffHot()
    this.getStaffList()
  },
  methods: {
    //获取前十条最新乐谱
    getStaff() {
      getNewStaff().then(res => {
        this.staffList[0].list = res.data.slice(0, 10);
      }).catch((err) => {
        console.log(err);
      })
    },

    //获取前十条最热乐谱
    getStaffHot() {
      getHotStaff().then(res =>{
        this.staffList[1].list = res.data.slice(0, 10);
      }).catch((err) => {
        console.log(err);
      })
    },

    //获取前十个乐谱集
    getStaffList() {
      getAllStaffList().then(res => {
        this.staffList[2].list = res.data.slice(0, 10);
      }).catch((err) => {
        console.log(err);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/home.scss';
</style>
